<template>
 <div class="troch" v-cloak>
 <!--集采中心详情页  -->
      <div class="mines" >
        <div class="container main">
          <div class="Outermost">
            <p class="mines_title">首页>集采中心>商品详情</p>
            <div class="row">
              <div class="col-md-6">
                <div class="collect_banner">
                  <div class="collect_box">
                    <p class="collect_img">
                      <img src="../../../static/images/shou_detail1.png" alt="" />
                    </p>

                    <p class="collect_hot">团购价</p>
                    <p class="collect_footer shrink">
                      佳能Canon墨盒适用于BJ-5BJ/10eBJ/10exBJ/10SXBJ/2010SXBJ/20SXBJ/2010SXBJ/2
                    </p>
                  </div>
                     <!-- 小轮播 -->
                  <div class="collect_B clearfix">
                    <ul>
                      <li v-for="item in detailbanner"><img :src="item" alt=""></li><span>》</span>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="Product_infor">
                  <div class="hred">
                    <span class="product_T">适用850 851墨盒</span>
                    <span class="product_pay"
                      ><i><img src="../../../static/images/payment.png" alt=""/></i
                      ><b>{{ payD }}</b
                      >件已付款</span
                    >
                  </div>
                  <p class="buying_price" v-for="item in jgpay">
                    团购价<i>￥</i><b>{{ item.tgj }}</b
                    ><span
                      >最高门店加<del>￥{{ item.zgmd }}</del></span
                    ><span class="Discount">{{ item.ds }}折</span>
                  </p>
                  <p>
                    采用佳能独有的喷墨技术，PIXMA 打印机和打印介质、墨水、 墨盒
                    (包括FINE一体式墨盒和独立式墨水)以及软件均在内部
                    同步开发，旨在提高打印性能的同时使PIXMA打印机原装耗材
                    的使用更加轻松。
                  </p>
                  <div class="collect_btn">
                    <button class="btn" @click="go_page()">立即购买</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="row"> 
               <div class="col-md-3">
                 <div  class="canon">
                     <p class="canon_title">佳能Canon墨盒</p>
                   <p>品牌名称：Inkool/丹瑞</p>
                   <p>产品参数：xxxx</p>
                   <p>品牌: Inkool/丹瑞inkool墨</p>
                   <p>水型号: DRC-850XLT1适用</p>
                   <p>主机品牌: 佳能/CANON佳</p>
                   <p>能机型: iP7280 MX728/928 MG5480/6380适</p>
                   <p>用设备种类: 多功能一体机</p>
                   <p>颜色分类: 大促！一套五色加30元得两套！ 大促！一套六色加40元得两套 850XLBK大黑 851XLBK小黑 851XLC蓝色 851XLM红色 851XLY黄色 851XLGY灰色 850/851一套五色 850/851一套六色
                    </p>
                   <p>生产企业: 珠海丹俊打印技术有限公司</p>
                   <p class="canon_title">其他推荐</p>
                   
                 </div>
                   <!--  -->
                   <div class="recommendations" v-for="item in dationsD">
                      <p class="dations_img"><img src="../../../static/images/shop1.png" alt=""></p>
                      <p>{{item.sy}}</p>
                      <p> {{item.model}}</p>
                      <p>{{item.jh}}</p>
                      <p>{{item.rl}}</p>
                      <p class="dations_foot"><span>立即购买</span><span>￥{{item.price}}</span></p>
                  </div>
               </div>
               <div class="col-md-9">
                 <div class="Commodity ">               
                      <ul class="Comms clearfix">
                        <li v-for="(item,index) in CommosdD" :class="{'loop_active':commcur === index}"
                        @click="commItme(item,index)">{{item.title}}</li>
                      </ul>
                      <div class="comm_big">
                              <img src="../../../static/images/shou_detail1.png" alt="">
                      </div>
                      <p class="parameter">产品适用机型急参数</p>
                      <div class="modal_type">
                        <ul class="Picture_display">
                          <li v-for="item in typeD"><img :src="item" alt=""></li>
                        </ul>
                        <div class="tytpe_inmation">
                          <p>产品型号：DRC-850XLT1/DRC-850XLT1/DRC-850XLT1/DRC-850XLT1</p>
                          <p>适用品牌：CANON佳能</p>
                          <p>中文品牌：丹瑞</p>
                          <p>打印颜色：黑色/彩色（红黄蓝）</p>
                          <p>
                              墨水容量：黑色ip7280/6780/8780(6色）</p>
                          <p class="modified clearfix"><span>适用机型：</span><span >DRC-850XLT1/DRC-850XLT1/DRC-850XLT1/DRC-850XLT1
                              DRC-850XLT1/DRC-850XLT1/DRC-850XLT1/DRC-850XLT1
                              DRC-850XLT1/DRC-850XLT1/DRC-850XLT1/DRC-850XLT1</span></p>
                        </div>
                        <p class="parameter">产品围观</p>
                        <div class="picture_show">
                            <ul v-for="item in disD">
                                <li><span><img :src="item.top_img" alt=""></span><p>{{item.top_show}}</p></li>
                                <li ><span><img :src="item.after_img" alt=""></span><p>{{item.afetr_show}}</p></li>
                              </ul>
                        </div>
                      </div>
                 </div>
               </div>
          </div>
          <!--  -->
        </div>
      </div>

 
      <!--  -->
    
    </div>
</template>
<script>
import headlogin from '../../views/localPage/headlogin'
export default{
data(){
  return{
    cur: 1,//导航栏的默认光标
    Navigation:false,//服务分类的隐藏显示

    commcur: 0,//商品详情/团购须知

    navD: [
      { id: 1, zt: "首页" },
      { id: 2, zt: "采集中心" },
      { id: 3, zt: "服务机构" },
      { id: 4, zt: "服务顾问" },
      { id: 5, zt: "关于我们" }
    ],

  payD: "123445",
  detailbanner: [
      "../../../static/images/small.png",
      "../../../static/images/small.png",
      "../../../static/images/small.png",
      "../../../static/images/small.png",
      "../../../static/images/small.png",
      "../../../static/images/small.png",
      "../../../static/images/small.png"
    ],

     dationsD: [
      {
        img: "",
        sy: "INKOOL 适用兄弟LC699XL墨盒",
        model: "BROTHER MFC-J2320 MFC-J2720",
        jh: "打印机墨盒墨水 LC695XL墨盒",
        rl: "LC699墨水 大容量",
        price: "1499"
      },
      {
        img: "",
        sy: "INKOOL 适用兄弟LC699XL墨盒",
        model: "BROTHER MFC-J2320 MFC-J2720",
        jh: "打印机墨盒墨水 LC695XL墨盒",
        rl: "LC699墨水 大容量",
        price: "1499"
      },
      {
        img: "",
        sy: "INKOOL 适用兄弟LC699XL墨盒",
        model: "BROTHER MFC-J2320 MFC-J2720",
        jh: "打印机墨盒墨水 LC695XL墨盒",
        rl: "LC699墨水 大容量",
        price: "1499"
      },
      {
        img: "",
        sy: "INKOOL 适用兄弟LC699XL墨盒",
        model: "BROTHER MFC-J2320 MFC-J2720",
        jh: "打印机墨盒墨水 LC695XL墨盒",
        rl: "LC699墨水 大容量",
        price: "1499"
      }
    ],
    jgpay: [{ tgj: 186, zgmd: 211, ds: 6.6 }],
    CommosdD: [{ title: "商品详情" }, { title: "团购须知" }],
    typeD: [
      "../../../static/images/shou1.png",
      "../../../static/images/shou2.png",
      "../../../static/images/shou1.png",
      "../../../static/images/shou2.png"
    ],
       disD: [
      {
        top_img: "../../../static/images/product1.png",
        top_show: "顶侧面",
        after_img: "../../../static/images/product2.png",
        afetr_show: "后侧面"
      },
      {
        top_img: "../../../static/images/product3.png",
        top_show: "顶侧面",
        after_img: "../../../static/images/product4.png",
        afetr_show: "后侧面"
      }
    ]
  }

},

 methods: {
    // 导航栏
    getItme: function(item, index) {
      this.cur = index;
      switch(index)
      {
                  case 0:
             
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:
           
                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:
              
                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:
                  
                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:
                  
                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
      }
    },
  

   // 商品详情页
    commItme(item, index) {
      this.commcur = index;
    },
    //写需求
    release_demand(){
        this.$router.push({path:'/ServiceSupermarket/CreateDemand'})    
    },
    //立即购买
    go_page(){
      this.$router.push({path:'/ServiceSupermarket/BuyStep1'})
    },
 
  },
  components:{headlogin}


}
</script>
<style scoped>
.mines .Outermost{
  height: 690px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 60px;
}
.mines .mines_title{
  padding: 60px 0 40px 0;
  height: 20px;
  font-size: 12px;
	letter-spacing: 0px;
	color: #999999;
}
.mines .collect_banner .collect_box{
  height: 438px;
  position: relative;
}
.mines .collect_banner .collect_box:hover{
  cursor: pointer;
}
.mines .collect_banner .collect_box .collect_img img{
  width: 100%;
  height: 100%;
}
.mines .collect_banner .collect_box .collect_hot{
  position: absolute;
  top: 0;
  right: 50px;
  width: 69px;
	height: 69px;
  background-image: url(../../../static/images/collect_h.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 100000;
   padding: 10px;
   color: white;
}
.mines .collect_banner .collect_box .collect_footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  text-align: center;
  padding: 10px;
  color: white;
  background-color: #5d5d5e;
}
.mines .collect_banner .collect_B ul{
   overflow: hidden;
   height: 96px;
}
.mines .collect_banner .collect_B li{float: left;height: 96px;width: 105px;margin-left: 10px;}
.mines .collect_banner .collect_B span{
  margin-left: 20px;
  display: inline-block;
  width: 44px;
  height: 40px;
  font-size: 40px;
  color: #1575f9;
  text-align: center;
}
.Product_infor{
  margin-top: 60px;
}
.Product_infor .product_T{
  display: inline-block;
  font-size: 24px;
  font-weight:600;
}
.Product_infor .hred{
  border-bottom: 1px solid #e0e0e0;
  height: 100px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.Product_infor .product_pay{
  margin: 0 0 0px 60px;
  display: inline-block;
  font-size: 12px;
  width: 140px;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
	background-color: #fafafa;
	border-radius: 2px;
  border: solid 1px #e0e0e0;
  border-radius: 4px;
}
.Product_infor .product_pay i img{
  margin-bottom: 4px;
}
.Product_infor .product_pay b{
  color: #e71827;
  margin-left: 5px;
}
.Product_infor .buying_price{
  font-size: 20px;
	letter-spacing: 0px;
	color: #333333;
}
.Product_infor .buying_price i{
  color: #e60012;
  font-style: normal;
}
.Product_infor .buying_price b{
  font-size: 36px;
	font-weight: normal;
	letter-spacing: 0px;
  color: #e60012;
  margin-right: 40px;
}
.Product_infor .buying_price .Discount{
  margin-left: 15px;
  font-size: 24px;
	letter-spacing: 0px;
	color: #e60012;
}
.Product_infor .collect_btn{
  text-align: right;
  margin-top: 80px;
}
.Product_infor .collect_btn button{
  width: 140px;
  height: 40px;
  color: white;
  background-color: #ff9900;
	border-radius: 20px;
}
.canon{
  background-color: white;

}
.canon p{
    padding:0 20px;
}
.canon .canon_title{
  padding: 0;
  height: 60px;
	background-image: linear-gradient(0deg, 
		#1575f9 0%, 
		#2fc1f7 100%), 
	linear-gradient(
		#ffffff, 
		#ffffff);
	background-blend-mode: normal, 
		normal;
  border: solid 1px #e0e0e0;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.Commodity .Comms{
  height: 58px; 
 width: 100%;
 background-color: white;
 margin: 0;
}
.Commodity .Comms li{
  float: left;  height: 58px; width: calc(100% / 5);
  line-height: 58px;
  text-align: center;
}
.Commodity .comm_big{
  width: 100%;
	height: 660px;
  width: 100%;
}
.Commodity .comm_big img{
  width: 100%;
  height: 100%;
}
.Commodity .parameter{
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #418ef8;
  font-size: 33px;
  color: white;
}
.recommendations {
  margin-top: 40px;
}
 .recommendations .dations_img{
  height: 241px;
  width: 100%;
}
 .recommendations .dations_img img{
  width: 100%;
  height: 100%;
}
 .recommendations p{
font-size: 14px;
}
.recommendations .dations_foot{
  height: 32px;
  background-color: #313131;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.modal_type .Picture_display li{
  width:calc(calc(100% - 10px) / 2);
  float: left;
  height: 258px;
  margin-bottom: 10px;
}
.modal_type .Picture_display li:first-child,.modal_type .Picture_display li:nth-child(3){
  margin-right: 10px;
}
.modal_type .Picture_display li img{
  width: 100%;
  height: 100%;
}
.modal_type .tytpe_inmation{
  margin:40px 0 50px 0;
}
.modal_type .tytpe_inmation p{
  font-size: 20px;
	line-height: 40px;
	letter-spacing: 1px;
	color: #333333;
}
.modal_type .tytpe_inmation .modified span:first-child{
  width:13%;
}
.modal_type .tytpe_inmation .modified span:last-child{
    width: 87%;
   float: right;
   display: inline-block;
   height: 130px;
}
.picture_show ul{
  margin-bottom: 30px;
}
.picture_show li{
  width:calc(calc(100% - 20px) / 2);
  float: left;
  height: 500px;
}
.picture_show li span{
  display: inline-block;
  height: 410px;
}
.picture_show li span img{
  width: 100%;
  height: 100%;
}
.picture_show li p{
  text-align: center;
  height: 90px;
  line-height: 90px;
  font-size: 24px;
	font-weight: 600;
	color: #333333;
}
.picture_show li:first-child{
  margin-right: 20px;
}
</style>
